export let name = 'payment';
export function Render(){
    return `
<style>

/* 收银台容器 */
.cashier-container {
  width: 100%;
  background-color: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #333;
  position: relative;
}

/* 顶部标题栏 */
.header {
  display: flex;
  align-items: center;
  border-bottom: 0.1rem solid #ccc;
}
.title {
  font-size: 3.4rem; 
  font-weight:400;
  margin: 2rem auto;
}

/* 金额信息 */
.amount-section {
  padding: 10rem 1.25rem; 
  text-align: center;
}
.total-amount {
  font-size: 5rem;
  color: #f00;
  font-weight: 500;
  margin-bottom: 4rem; 
}
.remain-time {
  font-size: 2.5rem;
  color: #999;
}

/* 支付方式 */
.payment-section {
  padding: 3rem 2rem; 
  border-top: 0.1rem solid #ccc;
  border-bottom: 0.1rem solid #ccc;
}
.section-title {
  font-size: 3rem; 
  font-weight: 600;
  margin-bottom: 3rem; 
}
.payment-item {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  margin-bottom: 3rem; 
}
.payment-name {
  font-size: 2.5rem; 
  color: #333;
}
.balance-amount {
  font-size: 2.3rem; 
  color: #999;
  margin-left: 23.4rem; /* 8px */
  margin-right: 4rem;
}
.payment-item input[type='radio']{
    width: 2.5rem;
    height: 2.5rem;
    border: 0.1rem solid #ccc;
    border-radius: 100%;
}

/* 立即支付按钮 */
.pay-btn {
  width: 95%;
  padding: 1rem; 
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 1rem; 
  font-size: 3rem; 
  cursor: pointer;
  margin: 2rem auto; 
  display: block;
}
.pay-btn:active {
  opacity: 0.8;
}
.quitBtn{
    width: 6rem;
    height: 6rem;
    position: fixed;
    top: 1.5rem;
    left: 1rem;
    font-size: 2rem;
    border-radius: 6rem;
    background-color: #fff;
    border: 0.1rem solid #333;
    }
</style>
    <div class="cashier-container">
  <!-- 顶部标题栏 -->
  <div class="header">
    
    <div class="title">收银台</div>
  </div>

  <!-- 金额信息 -->
  <div class="amount-section">
    <p class="total-amount">¥15.00</p>
    <p class="remain-time">剩余支付时间 00: <span class="minute">14</span> : <span class="second">59</span></p>
  </div>

  <!-- 支付方式 -->
  <div class="payment-section">
    <div class="section-title">选择支付方式</div>
    <label class="payment-item">
      <span class="payment-name ">支付宝支付</span>
      <input type="radio"  name="payment" checked>
    </label>
    <label class="payment-item clearfix">
      <span class="payment-name">余额支付</span>
      <span class="balance-amount">余额: 2681.50元</span>
      <input type="radio" name="payment">
    </label>
  </div>

  <!-- 立即支付按钮 -->
  <button class="pay-btn">立即支付</button>
</div>
<!--点击退出到首页-->
<input type="button" class="quitBtn" value="<退出" data-hash = "/goods/order">
    `
}
export function afterRender(){
    //商品详情页显示的时候,底部导航栏隐藏
    let bottomNav = document.querySelector(".bottomNav");
    bottomNav.style.display = "none";
    let quitBtn = document.querySelector(".quitBtn");
    let path = quitBtn.getAttribute("data-hash");
    quitBtn.addEventListener("click", function () {
        location.hash = path;
        bottomNav.style.display = "block";
    })
    //支付倒计时
    let second = document.querySelector(".second");
    let minute = document.querySelector(".minute");
    let payBtn = document.querySelector(".pay-btn");
    //点击支付,添加事件
    function payment () {
        console.log(111)
    }
    payBtn.addEventListener("click",payment)
    let interval =  setInterval(function(){//Interval = 间隔
        second.innerHTML--;
        if(second.innerHTML == 0){
            minute.innerHTML--;
            second.innerHTML = 59;
        }
        //倒计时结束之后停止支付,修改支付样式
        if(minute.innerHTML == 0){
            minute.innerHTML = '00';
            second.innerHTML = '00';
            clearInterval(interval);
            payBtn.style.backgroundColor = "#ccc";
            payBtn.innerHTML = "支付超时";
            //超时后则移除支付的点击事件
            payBtn.removeEventListener("click", payment )
        }
    },1000);



}